<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="icon" href="../img/logo_g0yv.jpg" type="img/x-ico">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/common.js"></script>

    <!--    注释：解释  -->
    <!--    <style>-->
    <!--     -->
    <!--    </style>-->
</head>
<body>
<!--所有的内容全部写入body，第一阶段我们用到的标签：div，img-->
<!--怎么判断当前div的高宽-->
<!--怎么来设置背景颜色？-->
<!--基本数要设置的功能和英文意思相近-->
<!-- div 里面有默认的属性,一般常见的属性没有背景颜色，属于html自带
 有颜色的叫做自定义属性 -->
<!--属性的作用是什么呢？为了得到当前的div，设置样式-->
<!--<div title class="class-aaa"> aaa</div>-->
<!--&lt;!&ndash;title 鼠标移上去显示里面的内容&ndash;&gt;-->
<!--<div>-->
<!--    <div about=""  bbb class="class-bbb" id="id-bbb" title="title-bbb">bbb</div>-->
<!--</div>-->
<!--&lt;!&ndash;<div class="class-ccc"><a href="https://www.baidu.com/">ccc</a></div>&ndash;&gt;-->
<!--<div class="class-ccc" onclick="window.open('https://www.baidu.com/','_self')">ccc</div>-->
<!--&lt;!&ndash;<title>aaa</title>&ndash;&gt;-->

<div>
    <div id="top">

    </div>
    <div class="middle">
        <div>
            <div class="news">
                <div class="title">较新动态</div>
                <div class="border-top">
                    <!--                    图片-->
                    <div><img src="../img/m331.jpg"></div>
                    <!--                    新闻内容-->
                    <div class="news-content">
                        <div>
                            <!--                            标题-->
                            <div class="font-title single-over">日本较大抹茶餐饮七叶和茶登陆上正式登陆上海,其中
                            </div>
                            <!--                            内容-->
                            <div class="font-content single-over">海日本较大的抹茶餐饮连锁</div>
                        </div>
                        <div>
                            <!--                            标题-->
                            <div class="font-title single-over">日本较大抹茶餐饮七叶和茶登陆上正式登陆上海,其中
                            </div>
                            <!--                            内容-->
                            <div class="font-content single-over">
                                海日本较大的抹茶餐饮连锁海日本较大的抹茶餐饮连锁海日本较大的抹茶餐饮连锁海日本较大的抹茶餐饮连锁海日本较大的抹茶餐饮连锁
                            </div>
                        </div>
                        <div>
                            <!--                            标题-->
                            <div class="font-title single-over">日本较大抹茶餐饮七叶和茶登陆上正式登陆上海,其中
                            </div>
                            <!--                            内容-->
                            <div class="font-content single-over">海日本较大的抹茶餐饮连锁</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product">
                <div class="title">产品展示</div>
                <div class="border-top">
                    <div>
                        <div><img src="../img/31_mixq.jpg"></div>
                        <div class="font-title single-over">茄子</div>
                        <div class="font-content single-over">原料：茄子，花椒。。。茄子，花椒茄子，花椒茄子，花椒茄子，花椒</div>
                    </div>
                    <div>
                        <div><img src="../img/31_mixq.jpg"></div>
                        <div class="font-title single-over">茄子茄子茄子茄子茄子茄子茄子茄子茄子</div>
                        <div class="font-content single-over">原料：茄子，花椒。。。茄子，花椒茄子，花椒茄子，花椒茄子，花椒</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot">

    </div>
</div>
</body>
</html>